<template>
  <!--编辑用户信息组件-->
  <div class="edit-box">
    <div class="edit-header">
      基本信息
    </div>
    <div class="item-box">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="昵称">
          <el-input v-model="form.name" style="width: 230px;"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <div>
            <el-radio v-model="form.sex" label="1" border>男</el-radio>
            <el-radio v-model="form.sex" label="2" border>女</el-radio>
          </div>
        </el-form-item>
        <el-form-item label="地区">
          <el-select v-model="form.province" placeholder="请选择省份" v-on:change="changeProvince">
            <el-option v-bind:label="province" v-bind:value="province" v-for="(province,index) in provinceArr" v-bind:key="index"></el-option>
          </el-select>

          <el-select v-model="form.city" placeholder="请选择市">
            <el-option  v-bind:label="city"  v-bind:value="city"v-for="(city,index) in cityArr"v-bind:key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="请选择出生日期" v-model="form.birth" style="width: 100%;"></el-date-picker>
          </el-col>

        </el-form-item>
        <el-form-item label="专业">
          <el-select v-model="form.region" placeholder="你的身份是什么">
            <el-option label="区域一" value="shanghai"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="修改密码">
          <el-input type="password"v-model="form.password" style="width: 230px;"></el-input>
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input type="textarea" v-model="form.desc" style="resize: none"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">保存</el-button>
          <el-button>放弃</el-button>
        </el-form-item>
      </el-form>
      <div class="logo-box">
        <div>移动放大</div>
        <div>
          <img src="../assets/images/identify.png"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import 'element-ui/lib/theme-chalk/index.css'
  export default {
    name: "edit",
    mounted: function () {
      //初始化二级菜单省市数据
      this.getDistrit();
    },

    data: function () {
      return {
        json: null,
        provinceArr: ["请选择", "北京市", "天津市", "河北省", "山西省", "内蒙古自治区", "辽宁省", "吉林省", "黑龙江省", "上海市", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西壮族自治区", "海南省", "重庆市", "四川省", "贵州省", "云南省", "西藏自治区", "陕西省", "甘肃省", "青海省", "宁夏回族自治区", "新疆维吾尔自治区"],
        cityArr: [],
        form: {//提交的数据
          name: '',
          province: '',
          sex: '',
          city: '',
          password: '',
          birth:'',
          type: [],
          desc: ''
        }
      }
    },
    methods: {
      /***
       * 获取省市两级数据
       */
      getDistrit: function(){
        var that = this;
        this.$http.get(this.CommonConst.LOCAL_URL).then(function (response) {
          that.json = response.data;
        }).catch(function (error) {
          console.log(error);
        });
      },

      /***
       * 当点击不同的省份，显示不同的市
       */
      changeProvince:function(){
        for (var index = 0; index < this.json[this.form.province].length; index++) {
          this.cityArr.push(this.json[this.form.province][index].name);
        }
      }
    }
  }
</script>

<style scoped>
  .logo-box {
    cursor: pointer;
    position: absolute;
    top: 50px;
    right: 38px;
    text-align: right;
    font-size: 12px;
    color: #666666;
  }
  .logo-box:hover img {
    width: 84px;
    height: 84px;
  }
  .logo-box img {
    width: 28px;
    height: 28px;
    transition: all ease 1s;
  }
  .item-box {
    height: 567px;
    padding: 37px 17px;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
  }

  .item {
    height: 36px;
    width: 100%;
  }

  .item > div {
    float: left;
  }

  .item-left {
    width: 80px;
    text-align: right;
  }

  .edit-box {
    float: left;
    margin-left: 12px;
    width: 757px;
    border-radius: 5px;
  }

  .edit-header {
    width: 100%;
    height: 57px;
    line-height: 57px;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom: 1px solid #f5f3f3;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: center;
  }


</style>
